<template>
	<view class="">
		<fa-navbar :title="vuex_table_title || '建言献策'"></fa-navbar>
		<view class="title">
			建言墙
		</view>
		<view class="banner">
			<view class="input">
				我要为<u-input v-model="value" height="36rpx" type="select" border="true" @click="showInput" />建言献策
			</view>
			<view class="textBanner">
				<view class="textarea_box">
					<textarea class="textarea" placeholder="请输入您的意见或建议~" placeholder-class="plclass" maxlength="500" @input="descInput" v-model="desc" />
					<view class="num">{{ desc.length }}/500</view>
				</view>
				
				<u-upload
					:action="vuex_config.upload.uploadurl"
					:file-list="fileList"
					:header="header"
					:form-data="formdata"
					@on-uploaded="successUpload"
					@on-error="errorUpload"
					@on-remove="remove"
					:max-count="3"
					width="150"
					height="150"
					ref="uUpload"
				></u-upload>
			</view>
			<view class="submit" @click="submit" v-if="showSub">
				提交
			</view>
		</view>
		<u-picker v-model="show" mode="selector" :range="selector" :default-selector="[0]" @confirm='confirm' @change='change'></u-picker>
	</view>
</template>

<script>
import Emitter from '@/uview-ui/libs/util/emitter.js';
export default {
	mixins: [Emitter],
	data(){
		return {
			indexIcon:this.$image_url+'/uploads/uniapp/image/logo.png',
			value:'',
			desc:'',
			selector:[],
			show:false,
			header: {},
			formdata: {},
			fileList:[],
			valueIndex:0,
			img:'',
			showSub:true
		}
	},
	created() {
		this.suggestType()
		this.header = {
			token: this.vuex_token || '',
			uid: this.vuex_user.id || 0
		};
		// let isObj = this.$u.test.object(this.vuex_config.upload.multipart);
		// if (isObj) {
		// 	this.formdata = this.vuex_config.upload.multipart;
		// }
	},
	methods:{
		showInput(){
			this.show = true
		},
		confirm(e){
			console.log(e)
			this.valueIndex = e
			this.value = this.selector[e[0]]
		},
		async suggestType(){
			// let data =''
			let res = await this.$api.suggestType()
			if(res.code){
				res.data.forEach((item,index)=>{
					this.selector.push(item.value)
				})
				
				console.log(this.selector,'this.selector')
				this.value = res.data[0].value
			}
			
		},
		descInput(e){
			this.desc = e.detail.value
			console.log(e,'descInput')
		},
		async submit(){
			let prames = ''
			let image = []
			let img = ''
			this.fileList = this.$refs.uUpload.lists;
			this.fileList.forEach((item)=>{
				image.push( item.response.data.url )
			})
			img = image.join(',')
			if(!this.desc.trim()){
				this.$u.toast('意见或建议不能为空')
			}else {
				// this.$refs.uUpload.upload();
				prames = {
					type:this.valueIndex,
					content: this.desc,
					img
				}
				let res = await this.$api.suggestPost(prames)
				if(res.code){
					console.log('反馈成功,感谢您的支持')
					this.showSub = false
					this.$u.toast('反馈成功,感谢您的支持',3000);
					setTimeout(()=>{
						uni.navigateBack({
							data:1
						})
					},2000)
				}
			}
			

		},
		successUpload(e) {
			// let image = []
			// let img = ''
			// // e.forEach((item)=>{
			// // 	image.push( item.response.data.url ) 
			// // })
			// img = image.join(',')
			// console.log(img,'eeeeeeeeeeeee')
			// this.img = img
		},
		remove(index, lists, name){
			this.changes(lists)
		},
		// changes(e){
		// 	console.log(e)
		// 	let urls = [];
		// 	e.map(item => {
		// 		//编辑时，已存在的，response不存在
		// 		if(!item.response){
		// 			urls.push(item.url)
		// 		}else if (item.response.code) {
		// 			urls.push(item.response.data.url);
		// 		}
		// 	});
		// 	let value = urls.join(',');
		// 	this.$emit('input', value);
		// 	setTimeout(() => {
		// 		this.dispatch('u-form-item', 'on-form-blur', value);
		// 	}, 50);
		// },
		errorUpload(e) {
			this.$u.toast('上传失败了！');
		}
	}
}
</script>

<style lang="scss">
	page{
		background-color: #d9001b;
		color: #fff;
		.title {
			font-size: 58rpx;
			font-weight: bold;
			text-align: center;
		}
		.banner {
			padding: 0 62rpx;
			margin-top: 30rpx;
			.input{
				display: flex;
				font-size: 26rpx;
				align-items: center;
			}
			.u-input{
				width: 220rpx;
				padding: 0 5rpx;
				margin: 0 10rpx;
				line-height: 50rpx;
			}
			.u-input__input{
				color: #fff !important;
				font-size: 32rpx;
			}
			.textBanner{
				height: 715rpx;
				background-color: #fff;
				padding: 38rpx;
				margin-top: 30rpx;
				border-radius: 20rpx;
				.textarea_box{
					height: 500rpx;
					.plclass {
						color: #999;
					}
					.textarea {
						width: 100%;
						color: #999;
					}
					.num{
						color: #4C4C4C;
						text-align: right;
					}
				}
			}
			.submit {
				background-color: #FF8624;
				height: 80rpx;
				text-align: center;
				line-height: 80rpx;
				border-radius: 80rpx;
				margin-top: 80rpx;
			}
		}
		
	}
	
</style>
